<template>
  <div class="echartsContainer">
    <div class="trendChart">
      <div class="activeData" :class="activeBg ? 'activeBg' : ''">
        <div class="fundCon fundConDate" v-if="activeTime">
          <div class="dateText fundConTop">时间 </div>
          <div class="dateCon">{{ activeTime }}</div>
        </div>
        <div class="fundCon fundConItems">
          <div class="fundData">
            <div>
              <span class="spot spot1"></span>
            </div>
            <div>
              <div class="name fundConTop">
               {{ filterEllise(dataObj.fund1Name) }}
              </div>
              <div :class="activeData > 0 ? 'fontColor1' : 'fontColor2'">
                <span v-if="activeData > 0">+</span
                >{{ activeData || activeData == 0 ? activeData : "--"
                }}<span v-if="activeData">%</span>
              </div>
            </div>
          </div>
          <div class="fundData">
            <div>
              <span class="spot spot2"></span>
            </div>
            <div>
              <div class="name fundConTop">
                {{ filterEllise(dataObj.fund2Name) }}
              </div>
              <div :class="activeData1 > 0 ? 'fontColor1' : 'fontColor2'">
                <span v-if="activeData1 > 0">+</span
                >{{ activeData1 || activeData1 == 0 ? activeData1 : "--"
                }}<span v-if="activeData1">%</span>
              </div>
            </div>
          </div>
          <div class="fundData">
            <div>
              <span class="spot spot3"></span>
            </div>
            <div>
              <div class="name fundConTop">沪深300</div>
              <div :class="activeData2 > 0 ? 'fontColor1' : 'fontColor2'">
                <span v-if="activeData2 > 0">+</span
                >{{ activeData2 || activeData2 == 0 ? activeData2 : "--"
                }}<span v-if="activeData2">%</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="trendCharts"
        ref="trendCharts"
        style="width: 6.9rem"
        :id="id"
      ></div>
      <div v-if="dataChanged" class="echartsLoading">
        正在计算中，请稍等片刻
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dataObj: {
      type: Object,
    },
    id: {
      type: String,
    },
  },
  data() {
    return {
      dataRefresh: false, //网络中断接口异常，数据异常，需要点击刷新
      dataChanged: false, //数据加载中
      activeBg: false,
      symboltype: "none",
      charts: null,
      //折线图选中当前位置信息
      activeTime: null,
      activeData: null,
      activeData1: null,
      activeData2: null,
      normalDialog: {
        showMask: false,
        title: "",
        content: "",
        yesBtn: "",
        cancelBtn: "",
        hideCelButton: "", //为true时隐藏cel按钮，仅使用yes按钮的所有属性
      },
    };
  },
  computed: {},
  created() {

  },
  mounted() {
    this.showChart();
  },
  watch: {
    //父组件dataObj对象改变会触发此函数
    // dataObj: {
    //   handler(newValue, oldValue) {
    //     //预估净值不需要重新绘制echarts
    //     console.log(newValue,'值 。。。。')
    //     this.charts.clear();
        // this.$nextTick(() => {
        //   this.showChart(true);
        // });
    //     this.dataChanged = false;
    //     this.dataRefresh = false;
    //   },
    //   deep: true,
    // },
  },
  components: {},
  methods: {
    getOption() {
      let _this = this;

      let data = _this.dataObj;

      let xAxisData = data.date;
      let seriesData1 = data.fund1Data;
      let seriesData2 = data.fund2Data;
      let seriesData3 = data.fund3Data;

      let option = {
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            _this.activeBg = true;
            let value1 = params.filter((item) => {
              return item.seriesName == "line1";
            });
            let value2 = params.filter((item) => {
              return item.seriesName == "line2";
            });
            let value3 = params.filter((item) => {
              return item.seriesName == "line3";
            });
            _this.activeTime =
              params[params.length - 1] && params[params.length - 1].axisValue;
            _this.activeData =
              value1[0] &&
              (_this.$utils.getVarType.isArray(value1[0].data) == "array"
                ? value1[0].data[1]
                : value1[0].data);
            _this.activeData1 =
              value2[0] &&
              (_this.$utils.getVarType.isArray(value2[0].data) == "array"
                ? value2[0].data[1]
                : value2[0].data);
            _this.activeData2 =
              value3[0] &&
              (_this.$utils.getVarType.isArray(value3[0].data) == "array"
                ? value3[0].data[1]
                : value3[0].data);
            return "";
          },
          backgroundColor: "rgba(218,181,124, 0.1)",
          extraCssText: [7, 15, 15, 15],
          textStyle: {
            color: "#5B83FF",
          },
          confine: true,
          axisPointer: {
            label: {
              show: true,
              color: "#fff",
              fontFamily: "PingFangSC-Medium",
              fontSize: 14,
              borderRadius: 4,
              margin: 5,
              padding: [2, 4],
              backgroundColor: "#027ADF",
            },
            show: true,
            snap: true,
            type: "cross",
            trigger: "item",
            crossStyle: {
              type: "dashed",
              color: "#027ADF",
            },
            lineStyle: {
              type: "dashed",
              color: "#027ADF",
            },
          },
        },
        grid: {
          top: "10%",
          left: "0",
          right: "0",
          bottom: "5%",
          containLabel: true,
          width: "auto", //图例宽度
        },
        xAxis: {
          type: "category",
          data: xAxisData,
          axisLine: {
            lineStyle: {
              color: "#D2D2D2",
            },
          },
          axisPointer: {
            show: true,
          },
          axisLabel: {
            show: true,
            color: "#999999",
            margin: 10,
            interval: (index, value) => {
              if (
                [
                  0,
                  xAxisData.length - 1,
                  parseInt(xAxisData.length / 2),
                ].includes(index)
              ) {
                return true;
              } else {
                return false;
              }
            },
            formatter: function (value, index) {
              if (index == 0) {
                return "                    " + value;
              } else if (index == xAxisData.length - 1) {
                return value + "                    ";
              } else {
                return value;
              }
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          min: "dataMin",
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#D2D2D2",
            },
          },
          axisPointer: {
            show: false,
          },
          axisLabel: {
            show: true,
            color: " #999999",
            formatter: function (value, index) {
              let val = _this.dataObj.needPercent
                ? `${value.toFixed(4)}%`
                : `${value.toFixed(4)}`;
              return val;
            },
          },
        },
        series: [
          {
            type: "line",
            name: "line1",
            // lineStyle: {
            //   color: "#FF437C",
            //   width: 2,
            // },
			lineStyle: {
			    color: {
			        type: 'linear',
			        x: 0,
			        y: 0,
			        x2: 1,
			        y2: 0,
			        colorStops: [{
			            offset: 0,
			            color: '#dfd' // 0% 处的颜色
			        }, {
			            offset: 1,
			            color: '#f00' // 100% 处的颜色
			        }],
			        global: false // 缺省为 false
			    },
			    width: 1.4
			},
            itemStyle: {
              normal: {
                color: "#027ADF",
              },
            },
            symbol: "circle",
            symbolSize: 2,
            showSymbol: false,
            showAllSymbol: false,
            hoverAnimation: true,
            data: seriesData1,
          },
          {
            type: "line",
            name: "line2",
            // lineStyle: {
            //   color: "#5960FC",
            //   width: 2,
            // },
            lineStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [{
                        offset: 0,
                        color: '#C42CFF' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#0768F8' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                },
                width: 1.4
            },
            itemStyle: {
              normal: {
                color: "#027ADF",
              },
            },
            symbol: "circle",
            symbolSize: 2,
            showSymbol: false,
            showAllSymbol: false,
            hoverAnimation: true,
            data: seriesData2,
          },
          {
            type: "line",
            name: "line3",
            lineStyle: {
              color: "#FFB852",
              width: 1.2,
            },
            itemStyle: {
              normal: {
                color: "#027ADF",
              },
            },
            symbol: "circle",
            symbolSize: 2,
            showSymbol: false,
            showAllSymbol: false,
            hoverAnimation: true,
            data: seriesData3,
          },
        ],
      };
      return option;
    },
    showChart(status) {
      let _this = this;
      let myChart = _this.$echarts4.init(document.getElementById(_this.id));
      // let myChart = echarts.init(this.$refs[`${this.id}`]);
      // this.charts = echarts.init(this.$refs[`${this.id}`]);

      _this.charts = myChart;

      function todo(type) {
        _this.activeData =
          _this.dataObj.fund1Data &&
          _this.dataObj.fund1Data[
            _this.dataObj.fund1Data && _this.dataObj.fund1Data.length - 1
          ] &&
          _this.dataObj.fund1Data[
            _this.dataObj.fund1Data && _this.dataObj.fund1Data.length - 1
          ][1];
        _this.activeData1 =
          _this.dataObj.fund2Data &&
          _this.dataObj.fund2Data[
            _this.dataObj.fund2Data && _this.dataObj.fund2Data.length - 1
          ] &&
          _this.dataObj.fund2Data[
            _this.dataObj.fund2Data && _this.dataObj.fund2Data.length - 1
          ][1];
        _this.activeData2 =
          _this.dataObj.fund3Data &&
          _this.dataObj.fund3Data[
            _this.dataObj.fund3Data && _this.dataObj.fund3Data.length - 1
          ] &&
          _this.dataObj.fund3Data[
            _this.dataObj.fund3Data && _this.dataObj.fund3Data.length - 1
          ][1];

        let dateLength = _this.dataObj.date && _this.dataObj.date.length - 1;
        _this.activeTime = _this.dataObj.date[dateLength];
        _this.activeBg = false;
        type == 1 && myChart.setOption(_this.getOption(), status);
      }
      todo(1);
      window.addEventListener("resize", () => {
        myChart.resize();
        _this.charts.resize();
      });
      myChart.getZr().on("click", (params) => {
        todo(2);
        myChart.dispatchAction({
          type: "hideTip", //隐藏tooltip
        });
        myChart.dispatchAction({
          type: "updateAxisPointer",
          currTrigger: "leave", //隐藏竖线指示器
        });
      });
      myChart.getZr().on("mouseup", (params) => {
        todo(2);
        myChart.dispatchAction({
          type: "hideTip", //隐藏tooltip
        });
        myChart.dispatchAction({
          type: "updateAxisPointer",
          currTrigger: "leave", //隐藏竖线指示器
        });
      });
    },
    filterEllise(name) {
      if (name) {
        if (name.length > 5) {
          return name.substring(0, 5) + "...";
        } else {
          return name;
        }
      } else {
        return "--";
      }
    },
  },
  activated() {
    if (this.charts) {
      this.charts.resize();
    }
  },
};
</script>

<style scoped lang="scss">
.trendCharts {
  width: 100%;
  height: 5.2rem;
}

.trendChart {
  .activeBg {
    background: rgba(2, 122, 223, 0.06);
    padding: 0.2rem;
  }

  .activeData {
    border-radius: 0.08rem;
    display: flex;
    width: 100%;
    padding: 0.2rem;

    .fundCon {
      display: flex;
      justify-content: flex-end;
    }

    .fundConDate {
      display: flex;
      flex-direction: column;
      font-size: 0.22rem;
      font-family: PingFangSC, PingFangSC-Regular;
      color: #666666;
    }

    .fundConTop {
      margin-bottom: 0.08rem;
    }

    .fundConItems {
      flex: 1;
      margin-left: 0.4rem;

      :first-child {
        margin-left: 0 !important;
      }

      .fundData {
        flex: 1;
        display: flex;
        font-size: 0.22rem;
        font-family: PingFangSC, PingFangSC-Regular;

        .spot {
          display: inline-block;
          width: 0.06rem;
          height: 0.18rem;
          margin-right: 0.08rem;
          margin-top: 0.04rem;
        }

        .spot0 {
          background: transparent;
        }

        .spot1 {
          background: linear-gradient(180deg, #ffe458, #ff3471);
        }

        .spot2 {
          background: linear-gradient(180deg, #c42cff, #0768f8);
        }

        .spot3 {
          background: #ffa018;
        }

        .name {
          color: #60697e;
          font-size: 0.24rem;
          font-family: PingFangSC, PingFangSC-Regular;
          color: #333333;
          // width: 1.44rem;
          overflow: hidden;
          /*超出部分隐藏*/
          white-space: nowrap;
          /*不换行*/
          text-overflow: ellipsis;
          /*超出部分文字以...显示*/
        }

        .fontColor2 {
          color: #57b231;
        }

        .fontColor1 {
          color: #c72020;
        }
      }
    }
  }
}

.echartsContainer {
  width: 100%;
  position: relative;
  min-height: 6rem;
}

.echartsLoading {
  position: absolute;
  top: 0;
  left: -0.32rem;
  right: 0;
  bottom: 0;
  height: 100%;
  background: rgba(255, 255, 255, 1);
  width: calc(100% + 0.64rem);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #868e9f;
  font-size: 0.22rem;
}
</style>
